<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="">
	<meta name="author" content="">
	<base th:href="@{/}" />
	<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="css/font-awesome.min.css">
	<link rel="stylesheet" href="css/theme.css">
	<style>
		#footer {
			padding: 15px 0;
			background: #fff;
			border-top: 1px solid #ddd;
			text-align: center;
		}

		#topcontrol {
			color: #fff;
			z-index: 99;
			width: 30px;
			height: 30px;
			font-size: 20px;
			background: #222;
			position: relative;
			right: 14px !important;
			bottom: 11px !important;
			border-radius: 3px !important;
		}

		#topcontrol:after {
			/*top: -2px;*/
			left: 8.5px;
			content: "\f106";
			position: absolute;
			text-align: center;
			font-family: FontAwesome;
		}

		#topcontrol:hover {
			color: #fff;
			background: #18ba9b;
			-webkit-transition: all 0.3s ease-in-out;
			-moz-transition: all 0.3s ease-in-out;
			-o-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;
		}

		.label-type, .label-status, .label-order {
			background-color: #fff;
			color: #f60;
			padding: 5px;
			border: 1px #f60 solid;
		}

		#typeList  :not (:first-child ) {
			margin-top: 20px;
		}

		.label-txt {
			margin: 10px 10px;
			border: 1px solid #ddd;
			padding: 4px;
			font-size: 14px;
		}

		.panel {
			border-radius: 0;
		}

		.progress-bar-default {
			background-color: #ddd;
		}
	</style>
</head>
<body>
<div class="navbar-wrapper">
	<div class="container">
		<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
			<div class="container">
				<div class="navbar-header">
					<a class="navbar-brand" href="" style="font-size: 32px;">创意产品众筹平台</a>
				</div>
				<div id="navbar" class="navbar-collapse collapse"
					 style="float: right;">
					<ul class="nav navbar-nav">
						<li class="dropdown"><a href="#" class="dropdown-toggle"
												data-toggle="dropdown"><i class="glyphicon glyphicon-user"></i>
							[[${session.loginMember.username}]]<span class="caret"></span></a>
							<ul class="dropdown-menu" role="menu">
								<li><a href="member.html"><i
										class="glyphicon glyphicon-scale"></i> 会员中心</a></li>
								<li><a href="#"><i class="glyphicon glyphicon-comment"></i>
									消息</a></li>
								<li class="divider"></li>
								<li><a href="http://www.crowd.com/auth/member/logout"><i
										class="glyphicon glyphicon-off"></i> 退出系统</a></li>
							</ul></li>
					</ul>
				</div>
			</div>
		</nav>
	</div>
</div>

<div class="container theme-showcase" role="main">

	<div class="container">
		<div class="row clearfix">
			<div class="col-md-12 column">
				<div class="panel panel-default">
					<div class="panel-heading" style="text-align: center;">
						<div class="container-fluid">
							<div class="row clearfix">
								<div class="col-md-3 column">
									<div class="progress"
										 style="height: 50px; border-radius: 0; position: absolute; width: 75%; right: 49px;">
										<div class="progress-bar progress-bar-default"
											 role="progressbar" aria-valuenow="60" aria-valuemin="0"
											 aria-valuemax="100" style="width: 100%; height: 50px;">
											<div style="font-size: 16px; margin-top: 15px;">1.
												确认回报内容</div>
										</div>
									</div>
									<div
											style="right: 0; border: 10px solid #ddd; border-left-color: #88b7d5; border-width: 25px; position: absolute; border-left-color: rgba(221, 221, 221, 1); border-top-color: rgba(221, 221, 221, 0); border-bottom-color: rgba(221, 221, 221, 0); border-right-color: rgba(221, 221, 221, 0);">
									</div>
								</div>
								<div class="col-md-3 column">
									<div class="progress"
										 style="height: 50px; border-radius: 0; position: absolute; width: 75%; right: 49px;">
										<div class="progress-bar progress-bar-success"
											 role="progressbar" aria-valuenow="60" aria-valuemin="0"
											 aria-valuemax="100" style="width: 100%; height: 50px;">
											<div style="font-size: 16px; margin-top: 15px;">2.
												确认订单</div>
										</div>
									</div>
									<div
											style="right: 0; border: 10px solid #ddd; border-left-color: #88b7d5; border-width: 25px; position: absolute; border-left-color: rgba(92, 184, 92, 1); border-top-color: rgba(92, 184, 92, 0); border-bottom-color: rgba(92, 184, 92, 0); border-right-color: rgba(92, 184, 92, 0);">
									</div>
								</div>
								<div class="col-md-3 column">
									<div class="progress"
										 style="height: 50px; border-radius: 0; position: absolute; width: 75%; right: 49px;">
										<div class="progress-bar progress-bar-default"
											 role="progressbar" aria-valuenow="60" aria-valuemin="0"
											 aria-valuemax="100" style="width: 100%; height: 50px;">
											<div style="font-size: 16px; margin-top: 15px;">3. 付款</div>
										</div>
									</div>
									<div
											style="right: 0; border: 10px solid #ddd; border-left-color: #88b7d5; border-width: 25px; position: absolute; border-left-color: rgba(221, 221, 221, 1); border-top-color: rgba(221, 221, 221, 0); border-bottom-color: rgba(221, 221, 221, 0); border-right-color: rgba(221, 221, 221, 0);">
									</div>
								</div>
								<div class="col-md-3 column">
									<div class="progress" style="height: 50px; border-radius: 0;">
										<div class="progress-bar progress-bar-default"
											 role="progressbar" aria-valuenow="60" aria-valuemin="0"
											 aria-valuemax="100" style="width: 100%; height: 50px;">
											<div style="font-size: 16px; margin-top: 15px;">4. 完成</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="panel-body">
						<div class="container-fluid">
							<div class="row clearfix">
								<div class="col-md-12 column">
									<div class="alert alert-warning alert-dismissable"
										 style="color: red;">
										<button type="button" class="close" data-dismiss="alert"
												aria-hidden="true">×</button>
										<i class="glyphicon glyphicon-info-sign"></i> <strong>请在下单后15分钟内付款，否则您的订单会被自动关闭。</strong>
									</div>
								</div>
							</div>
						</div>

						<div id="address" class="container-fluid">
							<div class="row clearfix">
								<div class="col-md-12 column">
									<blockquote
											style="border-left: 5px solid #f60; color: #f60; padding: 0 0 0 20px;">
										<b> 收货地址 </b>
									</blockquote>
								</div>
								<div class="col-md-12 column" style="padding: 0 120px;">
									<div th:if="${#strings.isEmpty(session.addressVOList)}">尚未创建收货地址</div>
									<div th:if="${not #strings.isEmpty(session.addressVOList)}">
										<div th:each="address : ${session.addressVOList}" class="radio">
											<label> <input type="radio" name="addressId" th:value="${address.id}"
														   /> [[${address.receiveName}]]
												[[${address.phoneNum}]] [[${address.address}]]
											</label>
										</div>
									</div>
									<div class="radio">
										<label> <input type="radio" name="optionsRadios" value="option2"> 新地址
										</label>
									</div>
									<div
											style="border: 10px solid #f60; border-bottom-color: #eceeef; border-width: 10px; width: 20px; margin-left: 20px; margin-top: -20px; border-left-color: rgba(221, 221, 221, 0); border-top-color: rgba(221, 221, 221, 0); border-right-color: rgba(221, 221, 221, 0);"></div>
									<div class="panel panel-default"
										 style="border-style: dashed; background-color: #eceeef">
										<div class="panel-body">
											<div class="col-md-12 column">
												<form action="order/save/address" method="post" class="form-horizontal">
													<input type="hidden" name="memberId" th:value="${session.loginMember.id}" />
													<div class="form-group">
														<label class="col-sm-2 control-label">收货人（*）</label>
														<div class="col-sm-10">
															<input type="text" name="receiveName" class="form-control"
																   style="width: 200px;" placeholder="姓名：xxxx">
														</div>
													</div>
													<div class="form-group">
														<label class="col-sm-2 control-label">手机（*）</label>
														<div class="col-sm-10">
															<input class="form-control" name="phoneNum" type="text"
																   style="width: 200px;" placeholder="请填写11位手机号码"></input>
														</div>
													</div>
													<div class="form-group">
														<label class="col-sm-2 control-label">地址（*）</label>
														<div class="col-sm-10">
															<input class="form-control" name="address" type="text"
																   style="width: 400px;" placeholder="请填写11位手机号码"></input>
														</div>
													</div>
													<div class="form-group">
														<label class="col-sm-2 control-label"></label>
														<div class="col-sm-10">
															<button type="submit" class="btn btn-primary">确认配送信息</button>
														</div>
													</div>
												</form>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="container-fluid">
							<div class="row clearfix">
								<div class="col-md-12 column">
									<blockquote
											style="border-left: 5px solid #f60; color: #f60; padding: 0 0 0 20px;">
										<b> 发票信息 </b>
									</blockquote>
								</div>
								<div class="col-md-12 column" style="padding: 0 120px;">
									<div class="radio">
										<label> <input type="radio" name="invoiceRadio"
													   id="optionsRadios1" value="0" checked> 无需发票
										</label>
									</div>
									<div class="radio">
										<label> <input type="radio" name="invoiceRadio"
													   id="optionsRadios2" value="1"> 需要发票
										</label>
									</div>
									<div
											style="border: 10px solid #f60; border-bottom-color: #eceeef; border-width: 10px; width: 20px; margin-left: 20px; margin-top: -20px; border-left-color: rgba(221, 221, 221, 0); border-top-color: rgba(221, 221, 221, 0); border-right-color: rgba(221, 221, 221, 0);"></div>
									<div class="panel panel-default"
										 style="border-style: dashed; background-color: #eceeef">
										<div class="panel-body">
											<div class="col-md-12 column">
												<form class="form-horizontal">
													<div class="form-group">
														<label class="col-sm-2 control-label">发票抬头（*）</label>
														<div class="col-sm-10">
															<input type="text" name="invoiceTitle" class="form-control"
																   style="width: 200px;" placeholder="个人">
														</div>
													</div>
												</form>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="container-fluid">
							<div class="row clearfix">
								<div class="col-md-12 column">
									<blockquote
											style="border-left: 5px solid #f60; color: #f60; padding: 0 0 0 20px;">
										<b> 项目信息 <a style="font-size: 12px;"
													href="pay-step-1.html">修改数量</a>
										</b>
									</blockquote>
								</div>
								<div class="col-md-12 column">
									<table class="table table-bordered"
										   style="text-align: center;">
										<thead>
										<tr style="background-color: #ddd;">
											<td>项目名称</td>
											<td>发起人</td>
											<td width="300">回报内容</td>
											<td width="80">回报数量</td>
											<td>支持单价</td>
											<td>配送费用</td>
										</tr>
										</thead>
										<tbody>
										<tr>
											<td th:text="${session.orderProjectVO.projectName}">活性富氢净水直饮机</td>
											<td th:text="${session.orderProjectVO.launchName}">深圳市博实永道电子商务有限公司</td>
											<td th:text="${session.orderProjectVO.returnContent}">每满1750人抽取一台活性富氢净水直饮机，至少抽取一台。抽取名额（小数点后一位四舍五入）=参与人数÷1750人，由苏宁官方抽取。</td>
											<td th:text="${session.orderProjectVO.returnCount}">55</td>
											<td style="color: #F60" th:text="${session.orderProjectVO.supportPrice}">￥ 1.00</td>
											<td th:if="${session.orderProjectVO.freight == 0}">免运费</td>
											<td th:if="${session.orderProjectVO.freight != 0}" th:text="${session.orderProjectVO.freight}">免运费</td>
										</tr>
										</tbody>
									</table>
								</div>
								<div class="col-md-12 column">
									<div class="form-group">
										<label class="col-sm-2 control-label">备注</label>
										<div class="col-sm-10">
												<textarea class="form-control" name="remark" rows="1"
														  placeholder="填写关于回报或发起人希望您备注的信息"></textarea>
										</div>
									</div>
								</div>
								<div class="col-md-12 column">
									<blockquote
											style="border-left: 5px solid #f60; color: #f60; padding: 0 0 0 20px;">
										<b> 账单 </b>
									</blockquote>
								</div>

								<div class="col-md-12 column">
									<div class="alert alert-warning alert-dismissable"
										 style="text-align: right; border: 2px solid #ffc287;">
										<ul style="list-style: none;">
											<li style="margin-top: 10px;">支持金额：<span
													style="color: red;">￥[[${session.orderProjectVO.returnCount*session.orderProjectVO.supportPrice}]]</span></li>
											<li style="margin-top: 10px;">配送费用：<span
													style="color: red;">￥[[${session.orderProjectVO.freight}]]</span></li>
											<li style="margin-top: 10px; margin-bottom: 10px;"><h2>
												支付总金额：<span style="color: red;">￥[[${session.orderProjectVO.returnCount*session.orderProjectVO.supportPrice+session.orderProjectVO.freight}]]</span>
											</h2></li>
											<li
													style="margin-top: 10px; padding: 5px; border: 1px solid #F00; display: initial; background: #FFF;">
												<i class="glyphicon glyphicon-info-sign"></i> <strong>您需要先
												<a href="#address">设置配送信息</a> ,再提交订单
											</strong>
											</li>
											<li style="margin-top: 10px;">
												请在下单后15分钟内付款，否则您的订单会被自动关闭。</li>
											<li style="margin-top: 10px;">
												<button id="payButton" disabled="disabled" type="button"
														class="btn btn-warning btn-lg"
														onclick="window.location.href='pay-step-3.html'">
													<i class="glyphicon glyphicon-credit-card"></i> 立即付款
												</button>
											</li>
											<li style="margin-top: 10px;">
												<div class="checkbox">
													<label>
														<input id="knowRoleCheckBox" type="checkbox">我已了解风险和规则
													</label>
												</div>
											</li>
										</ul>


									</div>
								</div>
								<div class="container">
									<div class="row clearfix">
										<div class="col-md-12 column">
											<blockquote>
												<p>
													<i class="glyphicon glyphicon-info-sign"
													   style="color: #2a6496;"></i> 提示
												</p>
												<br> <span style="font-size: 12px;">1.众筹并非商品交易，存在一定风险。支持者根据自己的判断选择、支持众筹项目，与发起人共同实现梦想并获得发起人承诺的回报。<br>
														2.众筹平台仅提供平台网络空间及技术支持等中介服务，众筹仅存在于发起人和支持者之间，使用众筹平台产生的法律后果由发起人与支持者自行承担。<br>
														3.本项目必须在2022-06-04之前达到 ￥1000000.00
														的目标才算成功，否则已经支持的订单将取消。订单取消或募集失败的，您支持的金额将原支付路径退回。<br>
														4.请在支持项目后15分钟内付款，否则您的支持请求会被自动关闭。<br>
														5.众筹成功后由发起人统一进行发货，售后服务由发起人统一提供；如果发生发起人无法发放回报、延迟发放回报、不提供回报后续服务等情况，您需要直接和发起人协商解决。<br>
														6.如您不同意上述风险提示内容，您有权选择不支持；一旦选择支持，视为您已确认并同意以上提示内容。
													</span>
											</blockquote>
										</div>
									</div>
								</div>


							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>


	<div class="container" style="margin-top: 20px;">
		<div class="row clearfix">
			<div class="col-md-12 column">
				<div id="footer">
					<div class="footerNav">
						<a rel="nofollow" href="/">关于我们</a> | <a
							rel="nofollow" href="/">服务条款</a> | <a
							rel="nofollow" href="/">免责声明</a> | <a
							rel="nofollow" href="/">网站地图</a> | <a
							rel="nofollow" href="/">联系我们</a>
					</div>
					<div class="copyRight">Copyright ?2019-2022chenxingyu 版权所有
					</div>
				</div>

			</div>
		</div>
	</div>

</div>
<!-- /container -->

<!-- 为了收集当前页面中的所有数据，构造空表单 -->
<form id="summaryForm" action="pay/generate/order" method="post"></form>

<script src="jquery/jquery-2.1.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="script/docs.min.js"></script>
<script src="script/back-to-top.js"></script>
<script>

	$("#payButton").click(function(){

		// 1.收集所有要提交的表单项的数据
		var addressId = $("[name=addressId]:checked").val();
		var invoice = $("[name=invoiceRadio]:checked").val();
		var invoiceTitle = $.trim($("[name=invoiceTitle]").val());
		var remark = $.trim($("[name=remark]").val());

		// 2.将上面收集到的表单数据填充到空表单中并提交
		$("#summaryForm")
				.append("<input type='hidden' name='addressId' value='"+addressId+"'/>")
				.append("<input type='hidden' name='invoice' value='"+invoice+"'/>")
				.append("<input type='hidden' name='invoiceTitle' value='"+invoiceTitle+"'/>")
				.append("<input type='hidden' name='orderRemark' value='"+remark+"'/>")
				.submit();

	});

	$("#knowRoleCheckBox").click(function(){
		var currentStatus = this.checked;
		if(currentStatus) {
			$("#payButton").prop("disabled", "");
		}else{
			$("#payButton").prop("disabled","disabled");
		}
	});
	$('#myTab a').click(function(e) {
		e.preventDefault()
		$(this).tab('show')
	})
</script>
</body>
</html>